<!-- build time:Wed Apr 08 2020 11:46:45 GMT+0800 (GMT+08:00) --><!DOCTYPE html><html class="theme-next pisces use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="//cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script><link href="//cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"6f8389c1"}),daovoice("update")</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="https://fonts.loli.net/css?family=EB+Garamond:400,400i,700,700i|Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet"><link href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"><link href="/blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="https://gitee.com/sky_mirrors_the_clouds/cloudimg/raw/master/https://gitee.com/sky_mirrors_the_clouds/cloudimg/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="https://gitee.com/sky_mirrors_the_clouds/cloudimg/raw/master/https://gitee.com/sky_mirrors_the_clouds/cloudimg/favicon-32x32-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="https://gitee.com/sky_mirrors_the_clouds/cloudimg/raw/master/https://gitee.com/sky_mirrors_the_clouds/cloudimg/favicon-16x16-next.png?v=5.1.4"><link rel="mask-icon" href="https://gitee.com/sky_mirrors_the_clouds/cloudimg/raw/master/https://gitee.com/sky_mirrors_the_clouds/cloudimg/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo,"><link rel="alternate" href="/blog/atom.xml" title="天镜云生" type="application/atom+xml"><meta name="description" content="本文介绍了在Next主题的基础上进一步对博客进行美化的方案，主要包括:在文章末尾添加结束标记修改侧边栏的位置到左边添加不同类型的动态背景效果添加 live2d 看板娘为布局元素添加边缘弹性摆动效果个性化回到顶部按钮添加不同类型的鼠标点击特效评论区输入打字礼花特效读者可以根据需要选择其中喜欢的方案应用到站点博客中。"><meta property="og:type" content="article"><meta property="og:title" content="Hexo搭建个人博客系列：主题美化篇"><meta property="og:url" content="http://sky_mirrors_the_clouds.gitee.io/blog/hexo-theme-beautify.html"><meta property="og:site_name" content="天镜云生"><meta property="og:description" content="本文介绍了在Next主题的基础上进一步对博客进行美化的方案，主要包括:在文章末尾添加结束标记修改侧边栏的位置到左边添加不同类型的动态背景效果添加 live2d 看板娘为布局元素添加边缘弹性摆动效果个性化回到顶部按钮添加不同类型的鼠标点击特效评论区输入打字礼花特效读者可以根据需要选择其中喜欢的方案应用到站点博客中。"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/thumbnails/coast.jpg!thumbnail"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045027074.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045252399.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115092103046.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091950761.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091914602.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091826700.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/evan-you.png"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/live2d.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/wobblewindow.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/back-to-top.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-fireworks.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-explosion.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-love.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-text.gif"><meta property="og:image" content="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/typing-effect.gif"><meta property="article:published_time" content="2020-03-18T16:00:00.000Z"><meta property="article:modified_time" content="2020-04-04T08:33:14.914Z"><meta property="article:author" content="TJYS"><meta property="article:tag" content="Hexo"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="http://yearito-1256884783.image.myqcloud.com/thumbnails/coast.jpg!thumbnail"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/blog/",scheme:"Pisces",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!1,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"flipYIn",post_header:"perspectiveRightIn",post_body:"perspectiveLeftIn",coll_header:"perspectiveDownIn",sidebar:"perspectiveUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="http://sky_mirrors_the_clouds.gitee.io/blog/hexo-theme-beautify.html"><script></script><title>Hexo搭建个人博客系列：主题美化篇 | 天镜云生</title><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.1/js/bubble.js"></script><meta name="generator" content="Hexo 4.2.0"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">var windowWidth=$(window).width();windowWidth>480&&document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.1/js/snow.js"><\/script>')</script><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/Qikaile" target="_blank" rel="noopener external nofollow noreferrer" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/blog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">天镜云生</span> <span class="logo-line-after"><i></i></span></a></div><h1 class="site-subtitle" itemprop="description">Welcome!</h1></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/blog/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-about"><a href="/blog/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-tags"><a href="/blog/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-categories"><a href="/blog/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-archives"><a href="/blog/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-shuoshuo"><a href="/blog/shuoshuo/" rel="section"><i class="menu-item-icon fa fa-fw fa-fa-commenting-o fa-commenting"></i><br>说说</a></li><li class="menu-item menu-item-sitemap"><a href="/blog/sitemap.xml" rel="section"><i class="menu-item-icon fa fa-fw fa-sitemap"></i><br>站点地图</a></li><li class="menu-item menu-item-search"><a href="javascript:;" rel="external nofollow noreferrer" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://sky_mirrors_the_clouds.gitee.io/blog/blog/hexo-theme-beautify.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="TJYS"><meta itemprop="description" content=""><meta itemprop="image" content="/blog/images/avatar.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="天镜云生"></span><header class="post-header"><h2 class="post-title" itemprop="name headline">Hexo搭建个人博客系列：主题美化篇</h2><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><time title="创建于" itemprop="dateCreated datePublished" datetime="2020-03-19T00:00:00+08:00">2020-03-19 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E6%8A%80%E6%9C%AF/" itemprop="url" rel="index"><span itemprop="name">技术</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/blog/categories/%E6%8A%80%E6%9C%AF/%E5%8D%9A%E5%AE%A2/" itemprop="url" rel="index"><span itemprop="name">博客</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/blog/hexo-theme-beautify.html#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/blog/hexo-theme-beautify.html" itemprop="commentCount"></span> </a></span><span class="post-wordcount"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数&#58;</span> <span title="字数">4.4k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">时长 &asymp;</span> <span title="时长">19 分钟</span></span></div></header><div class="post-body" itemprop="articleBody"><p><img src="http://yearito-1256884783.image.myqcloud.com/thumbnails/coast.jpg!thumbnail" alt="题图" title="Photo by Marina Weishaupt"></p><p>本文介绍了在Next主题的基础上进一步对博客进行美化的方案，主要包括:</p><ul><li>在文章末尾添加结束标记</li><li>修改侧边栏的位置到左边</li><li>添加不同类型的动态背景效果</li><li>添加 live2d 看板娘</li><li>为布局元素添加边缘弹性摆动效果</li><li>个性化回到顶部按钮</li><li>添加不同类型的鼠标点击特效</li><li>评论区输入打字礼花特效</li></ul><p>读者可以根据需要选择其中喜欢的方案应用到站点博客中。</p><a id="more"></a><h1 id="修改博客字体"><a href="#修改博客字体" class="headerlink" title="修改博客字体"></a>修改博客字体</h1><p>在 <a href="https://www.google.com/fonts" target="_blank" rel="noopener external nofollow noreferrer">Google Fonts</a> 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 外链字体库地址，例如 //fonts.googleapis.com (默认值)</span></span><br><span class="line">  <span class="attr">host:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 全局字体，应用在 body 元素上</span></span><br><span class="line">  <span class="attr">global:</span></span><br><span class="line">    <span class="attr">external:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">family:</span> <span class="string">Monda</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 标题字体 (h1, h2, h3, h4, h5, h6)</span></span><br><span class="line">  <span class="attr">headings:</span></span><br><span class="line">    <span class="attr">external:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">family:</span> <span class="string">Roboto</span> <span class="string">Slab</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 文章字体</span></span><br><span class="line">  <span class="attr">posts:</span></span><br><span class="line">    <span class="attr">external:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">family:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># Logo 字体</span></span><br><span class="line">  <span class="attr">logo:</span></span><br><span class="line">    <span class="attr">external:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">family:</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 代码字体，应用于 code 以及代码块</span></span><br><span class="line">  <span class="attr">codes:</span></span><br><span class="line">    <span class="attr">external:</span> <span class="literal">true</span></span><br><span class="line">    <span class="attr">family:</span></span><br></pre></td></tr></table></figure></div><h1 id="文章页末美化"><a href="#文章页末美化" class="headerlink" title="文章页末美化"></a>文章页末美化</h1><h2 id="为标签添加图标"><a href="#为标签添加图标" class="headerlink" title="为标签添加图标"></a>为标签添加图标</h2><p>默认情况下标签前缀是 <code>#</code> 字符，用户可以通过修改主题源码将标签的字符前缀改为图标前缀，更改后效果如下：</p><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045027074.png" alt="标签图标前缀" title="标签图标前缀"></p><p>在文章布局模板中找到文末标签相关代码段，将 <code>#</code> 换成 <code>&lt;i class=&quot;fa fa-tags&quot;&gt;&lt;/i&gt;</code> 即可：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_macro\post.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">  &lt;footer class="post-footer"&gt;</span><br><span class="line">    &#123;% if post.tags and post.tags.length and not is_index %&#125;</span><br><span class="line">      &lt;div class="post-tags"&gt;</span><br><span class="line">        &#123;% for tag in post.tags %&#125;</span><br><span class="line"><span class="deletion">-          &lt;a href="&#123;&#123; url_for(tag.path) &#125;&#125;" rel="tag"&gt;# &#123;&#123; tag.name &#125;&#125;&lt;/a&gt;</span></span><br><span class="line"><span class="addition">+          &lt;a href="&#123;&#123; url_for(tag.path) &#125;&#125;" rel="tag"&gt;&lt;i class="fa fa-tags"&gt;&lt;/i&gt; &#123;&#123; tag.name &#125;&#125;&lt;/a&gt;</span></span><br><span class="line">        &#123;% endfor %&#125;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &#123;% endif %&#125;</span><br><span class="line">    ...</span><br><span class="line">  &lt;/footer&gt;</span><br></pre></td></tr></table></figure></div><p>Next中使用 <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank" rel="noopener external nofollow noreferrer">FontAwesome</a> 作为图标库，用户可以在 FontAwesome 上找到心仪的图标来替换标签的字符前缀。</p><h2 id="添加结束标记"><a href="#添加结束标记" class="headerlink" title="添加结束标记"></a>添加结束标记</h2><div class="note info"><p>本章节参考 <a href="https://asdfv1929.github.io/2018/01/28/add-the-end/" target="_blank" rel="noopener external nofollow noreferrer">asdfv1929 | Hexo NexT主题内给每篇文章后添加结束标语</a></p></div><p>在文末添加结束标记，效果如下：</p><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181113045252399.png" alt="文末结束标记" title="文末结束标记"></p><p>新建布局模板文件 post-end-tag.swig，添加如下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><figcaption><span>themes\next\layout\_macro\post-end-tag.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  &#123;% if not is_index %&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center;color:#bfbfbf;font-size:16px;"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>-------- 本文结束 <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-&#123;&#123; config.post_end_tag.icon &#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span> 感谢阅读 --------<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  &#123;% endif %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div><p>在文章布局模板中添加如下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_macro\post</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;#####################&#125;</span><br><span class="line">&#123;### END POST BODY ###&#125;</span><br><span class="line">&#123;#####################&#125;</span><br><span class="line"></span><br><span class="line"><span class="addition">+ &#123;% if config.post_end_tag.enabled and not is_index %&#125;</span></span><br><span class="line"><span class="addition">+   &lt;div&gt;</span></span><br><span class="line"><span class="addition">+     &#123;% include 'post-end-tag.swig' %&#125;</span></span><br><span class="line"><span class="addition">+   &lt;/div&gt;</span></span><br><span class="line"><span class="addition">+ &#123;% endif %&#125;</span></span><br><span class="line"></span><br><span class="line">&#123;% if theme.wechat_subscriber.enabled and not is_index %&#125;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &#123;% include 'wechat-subscriber.swig' %&#125;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure></div><p>在站点配置文件末尾添加如下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_end_tag:</span></span><br><span class="line">  <span class="attr">enabled:</span> <span class="literal">true</span>  <span class="comment"># 是否开启文末的本文结束标记</span></span><br><span class="line">  <span class="attr">icon:</span> <span class="string">paw</span> <span class="comment"># 结束标记之间的图标</span></span><br></pre></td></tr></table></figure></div><p>重启服务器后即可在文末看到结束标记。</p><h1 id="页面加载进度条"><a href="#页面加载进度条" class="headerlink" title="页面加载进度条"></a>页面加载进度条</h1><p>当网络不好的时候可能会在打开站点或跳转文章时出现短暂的白屏，此时如果能有加载进度提示将会提高用户操作体验。</p><p>在根目录下执行以下命令安装相关依赖：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CRYSTAL"><figure class="iseeu highlight /crystal"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone <span class="symbol">https:</span>/<span class="regexp">/github.com/theme</span>-<span class="keyword">next</span>/theme-<span class="keyword">next</span>-pace themes/<span class="keyword">next</span>/source/<span class="class"><span class="keyword">lib</span>/<span class="title">pace</span></span></span><br></pre></td></tr></table></figure></div><p>在主题配置文件中设置 <code>pace: true</code>。</p><p>默认提供了多种主题的进度条加载样式，有顶部提示的，有中间提示的，还有全页面遮挡提示的，个人认为默认的进度条效果就恰如其当，既能够在页面空白的时候起到加载作用，也不会因为太过花里胡哨而喧宾夺主，尤其是当你如果使用了不蒜子的站点访问统计的功能的时候，常常会遇到所有资源都加载完毕而不蒜子还在等待响应，如果这个时候在页面较显眼的位置出现一个停滞不前的进度条，很让人抓狂。</p><h1 id="侧边栏放左边"><a href="#侧边栏放左边" class="headerlink" title="侧边栏放左边"></a>侧边栏放左边</h1><p>受 <a href="https://www.ofind.cn/" target="_blank" rel="noopener external nofollow noreferrer">猪猪侠的博客</a> 所启发，萌生了想把主题侧边栏放在左侧的想法。</p><p>Next主题各系列中只有Pisces和Gemini支持通过主题配置文件来将侧边栏置于左侧或右侧，而Muse和Mist则需要深度修改源码才能实现改变侧边栏位置。</p><p>在自定义样式文件中添加如下规则：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><figcaption><span>themes\next\source\css\_custom\custom.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.sidebar-toggle</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.sidebar</span> &#123;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><p>修改动效脚本代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\source\js\src\motion.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">$(document)</span><br><span class="line">  .on('sidebar.isShowing', function() &#123;</span><br><span class="line">    NexT.utils.isDesktop() &amp;&amp; $('body').velocity('stop').velocity(</span><br><span class="line"><span class="deletion">-     &#123;paddingRight: SIDEBAR_WIDTH&#125;,</span></span><br><span class="line"><span class="addition">+     &#123;paddingLeft: SIDEBAR_WIDTH&#125;,</span></span><br><span class="line">      SIDEBAR_DISPLAY_DURATION</span><br><span class="line">    );</span><br><span class="line">  &#125;)</span><br><span class="line">  .on('sidebar.isHiding', function() &#123;</span><br><span class="line">  &#125;);</span><br><span class="line">  ...</span><br><span class="line">  hideSidebar: function() &#123;</span><br><span class="line"><span class="deletion">-   NexT.utils.isDesktop() &amp;&amp; $('body').velocity('stop').velocity(&#123;paddingRight: 0&#125;);</span></span><br><span class="line"><span class="addition">+   NexT.utils.isDesktop() &amp;&amp; $('body').velocity('stop').velocity(&#123;paddingLeft: 0&#125;);</span></span><br><span class="line">    this.sidebarEl.find('.motion-element').velocity('stop').css('display', 'none');</span><br><span class="line">    this.sidebarEl.velocity('stop').velocity(&#123;width: 0&#125;, &#123;display: 'none'&#125;);</span><br><span class="line"></span><br><span class="line">    sidebarToggleLines.init();</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><p>如此以来就可以将侧边栏放置在左边了，但当窗口宽度缩小到991px之后会出现样式错误：侧边栏收缩消失但是页面左侧仍留有空白间距，此时修改如下代码即可：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\source\css\_common\scaffolding\base.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">body &#123;</span><br><span class="line">  position: relative; // Required by scrollspy</span><br><span class="line">  font-family: $font-family-base;</span><br><span class="line">  font-size: $font-size-base;</span><br><span class="line">  line-height: $line-height-base;</span><br><span class="line">  color: $text-color;</span><br><span class="line">  background: $body-bg-color;</span><br><span class="line"></span><br><span class="line"><span class="deletion">- +mobile() &#123; padding-left: 0 !important; &#125;</span></span><br><span class="line"><span class="deletion">- +tablet() &#123; padding-left: 0 !important; &#125;  </span></span><br><span class="line"><span class="addition">+ +mobile() &#123; padding-right: 0 !important; &#125;</span></span><br><span class="line"><span class="addition">+ +tablet() &#123; padding-right: 0 !important; &#125;</span></span><br><span class="line">  +desktop-large() &#123; font-size: $font-size-large; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><h1 id="添加动态背景"><a href="#添加动态背景" class="headerlink" title="添加动态背景"></a>添加动态背景</h1><p>Next主题可以通过安装插件快速为站点添加不同效果的动态背景。</p><h2 id="粒子漂浮聚合"><a href="#粒子漂浮聚合" class="headerlink" title="粒子漂浮聚合"></a>粒子漂浮聚合</h2><p>应用效果如下图：</p><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115092103046.png" alt="canvas-nest 动态背景" title="canvas-nest 动态背景"></p><p>该功能由 <a href="https://github.com/theme-next/theme-next-canvas-nest" target="_blank" rel="noopener external nofollow noreferrer">theme-next-canvas-nest</a> 插件提供，在根目录下执行如下命令：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CRYSTAL"><figure class="iseeu highlight /crystal"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone <span class="symbol">https:</span>/<span class="regexp">/github.com/theme</span>-<span class="keyword">next</span>/theme-<span class="keyword">next</span>-canvas-nest themes/<span class="keyword">next</span>/source/<span class="class"><span class="keyword">lib</span>/<span class="title">canvas</span>-<span class="title">nest</span></span></span><br></pre></td></tr></table></figure></div><p>然后在主题配置文件中设置 <code>canvas_nest: true</code> 即可。</p><p>Next v6.5.0 及以上版本支持更多的自定义选项：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">onmobile:</span> <span class="literal">true</span> <span class="comment"># 是否在移动端显示</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">'0,0,255'</span> <span class="comment"># 动态背景中线条的 RGB 颜色</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.5</span> <span class="comment"># 动态背景中线条透明度</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span> <span class="comment"># 动态背景的 z-index 属性值</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span> <span class="comment"># 动态背景中线条数量</span></span><br></pre></td></tr></table></figure></div><h2 id="Three-三维动效"><a href="#Three-三维动效" class="headerlink" title="Three 三维动效"></a>Three 三维动效</h2><p><a href="https://github.com/theme-next/theme-next-three" target="_blank" rel="noopener external nofollow noreferrer">theme-next-three</a> 插件提供了三个类型的背景动效，应用效果如下：</p><div class="tabs" id="three-三维动效"><ul class="nav-tabs"><li class="tab active"><a href="#three-三维动效-1">three-waves</a></li><li class="tab"><a href="#three-三维动效-2">canvas-lines</a></li><li class="tab"><a href="#three-三维动效-3">canvas-sphere</a></li></ul><div class="tab-content"><div class="tab-pane active" id="three-三维动效-1"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091950761.png" alt></p></div><div class="tab-pane" id="three-三维动效-2"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091914602.png" alt></p></div><div class="tab-pane" id="three-三维动效-3"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/20181115091826700.png" alt></p></div></div></div><p>在根目录下执行如下命令安装相关依赖：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CRYSTAL"><figure class="iseeu highlight /crystal"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone <span class="symbol">https:</span>/<span class="regexp">/github.com/theme</span>-<span class="keyword">next</span>/theme-<span class="keyword">next</span>-three themes/<span class="keyword">next</span>/source/<span class="class"><span class="keyword">lib</span>/<span class="title">three</span></span></span><br></pre></td></tr></table></figure></div><p>然后在主题配置文件中设置开启对应的动效选项即可。</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># JavaScript 3D library.</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-three</span></span><br><span class="line"><span class="comment"># three_waves</span></span><br><span class="line"><span class="attr">three_waves:</span> <span class="literal">true</span></span><br><span class="line"><span class="comment"># canvas_lines</span></span><br><span class="line"><span class="attr">canvas_lines:</span> <span class="literal">false</span></span><br><span class="line"><span class="comment"># canvas_sphere</span></span><br><span class="line"><span class="attr">canvas_sphere:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure></div><div class="note info"><p>个人认为在站点中添加动态背景并没有实际的意义，只会凭空增加页面内存占用及CPU消耗，所以本站没有添加任何动态背景。</p></div><h2 id="随机三角丝带"><a href="#随机三角丝带" class="headerlink" title="随机三角丝带"></a>随机三角丝带</h2><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/evan-you.png" alt="随机三角丝带" title="随机三角丝带"></p><div class="note info"><p>该功能由 Vue 作者 <a href="http://evanyou.me/" target="_blank" rel="noopener external nofollow noreferrer">尤雨溪</a> 首创。本章节中核心代码来源于 <a href="https://diygod.me/" target="_blank" rel="noopener external nofollow noreferrer">DIYgod</a> 编写的 <a href="https://github.com/DIYgod/hexo-theme-sagiri" target="_blank" rel="noopener external nofollow noreferrer">sagiri</a> 主题。</p></div><p>点击下方按钮下载相应的脚本，并置于 themes\\next\\source\\js\ 目录下：</p><p><a class="btn" href="https://script-1256884783.file.myqcloud.com/evan-you.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>随机三角丝带</a></p><p>在主题自定义布局文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><figcaption><span>themes\next\layout\_custom\custom.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;# 随机三角丝带背景 #&#125;</span><br><span class="line">&#123;% if theme.evanyou %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"evanyou"</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="selector-id">#evanyou</span> &#123;</span></span><br><span class="line">      position: fixed;</span><br><span class="line">      width: 100%;</span><br><span class="line">      height: 100%;</span><br><span class="line">      top: 0;</span><br><span class="line">      left: 0;</span><br><span class="line">      z-index: -1;</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/evan-you.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure></div><p>如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_layout.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">      ...</span><br><span class="line">      &#123;% include '_third-party/exturl.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/bookmark.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/copy-code.swig' %&#125;</span><br><span class="line"></span><br><span class="line"><span class="addition">+     &#123;% include '_custom/custom.swig' %&#125;</span></span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">  &lt;/html&gt;</span><br></pre></td></tr></table></figure></div><p>在主题配置文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># colorful trilateral riband background</span></span><br><span class="line"><span class="attr">evanyou:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure></div><p>如果从本地加载JS脚本速度较慢，可以考虑将脚本放到CDN上再引入。</p><h1 id="添加看板娘"><a href="#添加看板娘" class="headerlink" title="添加看板娘"></a>添加看板娘</h1><div class="note info"><p>本章节部分内容参考 <a href="https://fjkang.github.io/2017/12/08/%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E8%90%8C%E7%89%A9/" target="_blank" rel="noopener external nofollow noreferrer">FJKang | 添加一个萌物</a></p></div><p>该功能由 <a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener external nofollow noreferrer">hexo-helper-live2d</a> 插件支持，效果如下图：</p><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/live2d.gif" alt="live2d 看板娘" title="live2d 看板娘"></p><p>在站点根目录下执行以下命令安装依赖：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="SQL"><figure class="iseeu highlight /sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm <span class="keyword">install</span> <span class="comment">--save hexo-helper-live2d</span></span><br></pre></td></tr></table></figure></div><p>在站点配置文件中添加以下下配置项</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Live2D</span></span><br><span class="line"><span class="comment"># https://github.com/EYHN/hexo-helper-live2d</span></span><br><span class="line"><span class="attr">live2d:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">pluginRootPath:</span> <span class="string">live2dw/</span></span><br><span class="line">  <span class="attr">pluginJsPath:</span> <span class="string">lib/</span></span><br><span class="line">  <span class="attr">pluginModelPath:</span> <span class="string">assets/</span> <span class="string">Relative)</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 脚本加载源</span></span><br><span class="line">  <span class="attr">scriptFrom:</span> <span class="string">local</span> <span class="comment"># 默认从本地加载脚本</span></span><br><span class="line">  <span class="comment"># scriptFrom: jsdelivr # 从 jsdelivr CDN 加载脚本</span></span><br><span class="line">  <span class="comment"># scriptFrom: unpkg # 从 unpkg CDN 加载脚本</span></span><br><span class="line">  <span class="comment"># scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 从自定义地址加载脚本</span></span><br><span class="line">  <span class="attr">tagMode:</span> <span class="literal">false</span> <span class="comment"># 只在有 &#123;&#123; live2d() &#125;&#125; 标签的页面上加载 / 在所有页面上加载</span></span><br><span class="line">  <span class="attr">log:</span> <span class="literal">false</span> <span class="comment"># 是否在控制台打印日志</span></span><br><span class="line"></span><br><span class="line">  <span class="comment"># 选择看板娘模型</span></span><br><span class="line">  <span class="attr">model:</span></span><br><span class="line">    <span class="attr">use:</span> <span class="string">live2d-widget-model-shizuku</span>  <span class="comment"># npm package的名字</span></span><br><span class="line">    <span class="comment"># use: wanko # /live2d_models/ 目录下的模型文件夹名称</span></span><br><span class="line">    <span class="comment"># use: ./wives/wanko # 站点根目录下的模型文件夹名称</span></span><br><span class="line">    <span class="comment"># use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 自定义网络数据源</span></span><br><span class="line">  <span class="attr">display:</span></span><br><span class="line">    <span class="attr">position:</span> <span class="string">left</span> <span class="comment"># 显示在左边还是右边</span></span><br><span class="line">    <span class="attr">width:</span> <span class="number">100</span> <span class="comment"># 宽度</span></span><br><span class="line">    <span class="attr">height:</span> <span class="number">180</span> <span class="comment"># 高度</span></span><br><span class="line">  <span class="attr">mobile:</span></span><br><span class="line">    <span class="attr">show:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">react:</span></span><br><span class="line">    <span class="attr">opacityDefault:</span> <span class="number">0.7</span> <span class="comment"># 默认透明度</span></span><br></pre></td></tr></table></figure></div><div class="note info"><p>更多配置参数请查看 <a href="https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init" target="_blank" rel="noopener external nofollow noreferrer">L2Dwidget | live2d-widget.js</a></p></div><p>此时重启服务器暂时还看不到看板娘，需要手动下载或安装模型资源。可以从 <a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener external nofollow noreferrer">hexo live2d 模型预览</a> 里找到你喜欢的角色，然后根据 <a href="https://github.com/xiazeyu/live2d-widget-models" target="_blank" rel="noopener external nofollow noreferrer">live2d-widget-models</a> 中提供的方法来下载模型数据.</p><p>例如通过以下命令下载模型 shizuku：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="GAMS"><figure class="iseeu highlight /gams"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">$</span> npm install live2d-widget-<span class="keyword">model</span>-shizuku</span><br></pre></td></tr></table></figure></div><p>因为修改了站点配置文件，所以需要重启服务器才能预览模型效果。</p><p>如果设置了 <code>live2d.tagMode: true</code>，则可以在指定页面中插入以下标签：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#123;&#123;</span> <span class="string">live2d()</span> <span class="string">&#125;&#125;</span></span><br></pre></td></tr></table></figure></div><p>只有拥有该标签的页面才会渲染live2d模型，这样以来就可以精确控制在哪些页面上显示看板娘了。</p><p>如果只想在一级菜单页面上显示看板娘，可以在Header模板中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_partials\header\index.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="addition">+ &#123;% if is_index %&#125;</span></span><br><span class="line"><span class="addition">+   &#123;&#123; live2d() &#125;&#125;</span></span><br><span class="line"><span class="addition">+ &#123;% endif %&#125;</span></span><br></pre></td></tr></table></figure></div><div class="note info"><p>个人认为在文章内出现看板娘将会影响读者注意力的集中，毕竟一篇博客里最重要的是内容，而不是这些花里胡哨转移注意力的东西。所以本站只在一级菜单页面添加了看板娘，文章页面则保持极致精简的阅读体验。</p></div><p>经过测试发现 <code>live2d.mobile.show: false</code> 并没有生效，暂时没有找到好的解决方法，参考 <a href="https://github.com/EYHN/hexo-helper-live2d/issues/12" target="_blank" rel="noopener external nofollow noreferrer">EYHN/hexo-helper-live2d Issues #12</a> 后发现可以在自定义样式文件中添加以下代码来解决：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><figcaption><span>themes/next/source/css/_custom/custom.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#live2dcanvas</span> &#123;</span><br><span class="line">  +mobile() &#123;</span><br><span class="line">    <span class="selector-tag">display</span>: <span class="selector-tag">none</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  +<span class="selector-tag">tablet</span>() &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><div class="note info"><p>不要乱点不该点的地方，会生气的。</p></div><h1 id="边缘摆动效果"><a href="#边缘摆动效果" class="headerlink" title="边缘摆动效果"></a>边缘摆动效果</h1><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/wobblewindow.gif" alt="wobblewindow 边缘摆动" title="wobblewindow 边缘摆动"></p><p>在 <a href="https://www.ofind.cn/" target="_blank" rel="noopener external nofollow noreferrer">猪猪侠的博客</a> 里发现的这种特效，觉得挺有意思的，就从他Github上给扒过来了</p><p>点击下方按钮下载脚本，并置于 themes\\next\\source\\js\ 目录下：</p><p><a class="btn" href="https://script-1256884783.file.myqcloud.com/wobblewindow.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>wobblewindow.js</a></p><p>在主题自定义布局文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><figcaption><span>themes\next\layout\_custom\custom.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&#123;# wobble窗口摆动特效 #&#125;</span><br><span class="line">&#123;% if theme.wobble %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/wobblewindow.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//只在桌面版网页启用特效</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span>( <span class="built_in">window</span>.innerWidth &gt; <span class="number">768</span>  )&#123;</span></span><br><span class="line"><span class="javascript">      $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line">        &#123;% if theme.wobble.header %&#125;</span><br><span class="line"><span class="javascript">          $(<span class="string">'#header'</span>).wobbleWindow(&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">            radius: </span><span class="template-variable">&#123;&#123; theme.wobble.radius &#125;&#125;</span><span class="xml">,</span></span></span><br><span class="line"><span class="actionscript">            movementTop: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementLeft: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementRight: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            debug: <span class="literal">false</span>,</span></span><br><span class="line">          &#125;);</span><br><span class="line">        &#123;% endif %&#125;</span><br><span class="line"></span><br><span class="line">        &#123;% if theme.wobble.sidebar %&#125;</span><br><span class="line"><span class="javascript">          $(<span class="string">'#sidebar'</span>).wobbleWindow(&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">            radius: </span><span class="template-variable">&#123;&#123; theme.wobble.radius &#125;&#125;</span><span class="xml">,</span></span></span><br><span class="line"><span class="actionscript">            movementLeft: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementTop: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementBottom: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            position: <span class="string">'fixed'</span>,</span></span><br><span class="line"><span class="actionscript">            debug: <span class="literal">false</span>,</span></span><br><span class="line">          &#125;);</span><br><span class="line">        &#123;% endif %&#125;</span><br><span class="line"></span><br><span class="line">        &#123;% if theme.wobble.footer %&#125;</span><br><span class="line"><span class="javascript">          $(<span class="string">'#footer'</span>).wobbleWindow(&#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">            radius: </span><span class="template-variable">&#123;&#123; theme.wobble.radius &#125;&#125;</span><span class="xml">,</span></span></span><br><span class="line"><span class="actionscript">            movementBottom: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementLeft: <span class="literal">false</span>,</span></span><br><span class="line"><span class="actionscript">            movementRight: <span class="literal">false</span>,</span></span><br><span class="line"><span class="handlebars"><span class="xml">            offsetX: </span><span class="template-variable">&#123;&#123; theme.wobble.offset &#125;&#125;</span><span class="xml">,</span></span></span><br><span class="line"><span class="actionscript">            position: <span class="string">'absolute'</span>,</span></span><br><span class="line"><span class="actionscript">            debug: <span class="literal">false</span>,</span></span><br><span class="line">          &#125;);</span><br><span class="line">        &#123;% endif %&#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure></div><p>如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_layout.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">      ...</span><br><span class="line">      &#123;% include '_third-party/exturl.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/bookmark.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/copy-code.swig' %&#125;</span><br><span class="line"></span><br><span class="line"><span class="addition">+     &#123;% include '_custom/custom.swig' %&#125;</span></span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">  &lt;/html&gt;</span><br></pre></td></tr></table></figure></div><p>在自定义样式文件中添加以下样式：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><figcaption><span>themes\next\source\css\_custom\custom.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">//窗口波动效果相关样式</span><br><span class="line">if hexo-config('wobble')  &#123;</span><br><span class="line">  <span class="selector-class">.sidebar</span> &#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.wobbleTransparentBK</span>&#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>) <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.wobbleTransparentLine</span>&#123;</span><br><span class="line">    <span class="attribute">border-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>) <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  //Next.Muse中为Header和Footer添加背景色</span><br><span class="line">  <span class="selector-id">#header</span>, <span class="selector-id">#footer</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(<span class="number">245</span>, <span class="number">245</span>, <span class="number">245</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  //防止sidebar和footer同时开启动效时堆叠异常</span><br><span class="line">  <span class="selector-id">#sidebar</span>, <span class="selector-tag">header</span> &#123;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span> <span class="meta">!important</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  //防止挡住页末文章的阅读全文按钮</span><br><span class="line">  <span class="selector-class">.main</span> &#123;</span><br><span class="line">    <span class="attribute">padding-bottom</span>: <span class="number">200px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><div class="note warning"><p>Next.Muse主题方案中Header和Footer是没有背景色的，所以需要添加背景色后才能看出边缘摆动效果。另外，实现边缘摆动效果所需的 <code>z-index</code> 属性可能会导致元素堆叠异常，需要添加以上样式来矫正。</p></div><p>在主题配置文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># window woblle</span></span><br><span class="line"><span class="attr">wobble:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span>  <span class="comment"># 是否开启边缘波动效果</span></span><br><span class="line">  <span class="attr">radius:</span> <span class="number">50</span>  <span class="comment"># 波动半径</span></span><br><span class="line">  <span class="attr">sidebar:</span> <span class="literal">true</span>  <span class="comment"># 开启侧边栏边缘摆动</span></span><br><span class="line">  <span class="attr">header:</span> <span class="literal">true</span>  <span class="comment"># 开启头部边缘摆动</span></span><br><span class="line">  <span class="attr">footer:</span> <span class="literal">true</span>  <span class="comment"># 开启脚部边缘摆动</span></span><br></pre></td></tr></table></figure></div><p>用户可以根据需要在配置文件中为选择开启边缘摆动效果的布局元素。刷新浏览器，然后将鼠标移动到布局边缘上尽情的挑逗它吧。</p><p>如果从本地加载JS脚本速度较慢，可以考虑将脚本放到CDN上再引入。</p><h1 id="个性化回到顶部"><a href="#个性化回到顶部" class="headerlink" title="个性化回到顶部"></a>个性化回到顶部</h1><p>从 <a href="https://diygod.me/" target="_blank" rel="noopener external nofollow noreferrer">DIYgod的博客</a> 里扒来的，效果如下：</p><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/back-to-top.gif" alt="回到顶部" title="回到顶部"></p><p>原理很简单，将 back-to-top 按钮添加图片背景，并添加CSS3动效即可。</p><p>首先，找到自己喜欢的图片素材放到 source\\images\ 目录下。</p><p>你可以点击下方按钮下载本站所使用的小猫上吊素材（<br>小猫咪这么可爱，当然要多放点孜然啦…）</p><p><a class="btn" href="/images/scroll.png" download><br><i class="fa fa-download fa-fw"></i><br>下载图片</a></p><p>然后在自定义样式文件中添加如下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="CSS"><figure class="iseeu highlight /css"><figcaption><span>themes\next\source\css\_custom\custom.styl</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">//自定义回到顶部样式</span><br><span class="line"><span class="selector-class">.back-to-top</span> &#123;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">60px</span>;</span><br><span class="line">  width: 70px;  //图片素材宽度</span><br><span class="line">  height: 900px;  //图片素材高度</span><br><span class="line">  <span class="selector-tag">top</span>: <span class="selector-tag">-900px</span>;</span><br><span class="line">  <span class="selector-tag">bottom</span>: <span class="selector-tag">unset</span>;</span><br><span class="line">  <span class="selector-tag">transition</span>: <span class="selector-tag">all</span> <span class="selector-class">.5s</span> <span class="selector-tag">ease-in-out</span>;</span><br><span class="line">  background: url("/images/scroll.png");</span><br><span class="line"></span><br><span class="line">  //隐藏箭头图标</span><br><span class="line">  &gt; <span class="selector-tag">i</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  &amp;<span class="selector-class">.back-to-top-on</span> &#123;</span><br><span class="line">    <span class="attribute">bottom</span>: unset;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100vh</span> &lt; (<span class="number">900px</span> + <span class="number">200px</span>) ? <span class="built_in">calc</span>( <span class="number">100vh</span> - <span class="number">900px</span> - <span class="number">200px</span> ) : <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div><p>刷新浏览器即可预览效果。</p><h1 id="鼠标点击特效"><a href="#鼠标点击特效" class="headerlink" title="鼠标点击特效"></a>鼠标点击特效</h1><p>从各个站点里搜罗了以下四个比较常用的鼠标点击特效：</p><div class="tabs" id="鼠标点击特效"><ul class="nav-tabs"><li class="tab active"><a href="#鼠标点击特效-1">礼花特效</a></li><li class="tab"><a href="#鼠标点击特效-2">爆炸特效</a></li><li class="tab"><a href="#鼠标点击特效-3">浮出爱心</a></li><li class="tab"><a href="#鼠标点击特效-4">浮出文字</a></li></ul><div class="tab-content"><div class="tab-pane active" id="鼠标点击特效-1"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-fireworks.gif" alt></p></div><div class="tab-pane" id="鼠标点击特效-2"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-explosion.gif" alt></p></div><div class="tab-pane" id="鼠标点击特效-3"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-love.gif" alt></p></div><div class="tab-pane" id="鼠标点击特效-4"><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/cursor-text.gif" alt></p></div></div></div><p>点击下方按钮下载相应的脚本，并置于 themes\\next\\source\\js\\cursor\ 目录下：</p><p><a class="btn" href="https://script-1256884783.file.myqcloud.com/cursor/fireworks.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>礼花特效</a> <a class="btn" href="https://script-1256884783.file.myqcloud.com/cursor/explosion.min.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>爆炸特效</a> <a class="btn" href="https://script-1256884783.file.myqcloud.com/cursor/love.min.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>浮出爱心</a> <a class="btn" href="https://script-1256884783.file.myqcloud.com/cursor/text.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>浮出文字</a></p><p>在主题自定义布局文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><figcaption><span>themes\next\layout\_custom\custom.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;# 鼠标点击特效 #&#125;</span><br><span class="line">&#123;% if theme.cursor_effect == "fireworks" %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"/js/cursor/fireworks.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% elseif theme.cursor_effect == "explosion" %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">canvas</span> <span class="attr">class</span>=<span class="string">"fireworks"</span> <span class="attr">style</span>=<span class="string">"position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"</span> &gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/animejs/2.2.0/anime.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"/js/cursor/explosion.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% elseif theme.cursor_effect == "love" %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"/js/cursor/love.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% elseif theme.cursor_effect == "text" %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"/js/cursor/text.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure></div><p>如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_layout.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">      ...</span><br><span class="line">      &#123;% include '_third-party/exturl.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/bookmark.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/copy-code.swig' %&#125;</span><br><span class="line"></span><br><span class="line"><span class="addition">+     &#123;% include '_custom/custom.swig' %&#125;</span></span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">  &lt;/html&gt;</span><br></pre></td></tr></table></figure></div><p>在主题配置文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mouse click effect: fireworks | explosion | love | text</span></span><br><span class="line"><span class="attr">cursor_effect:</span> <span class="string">fireworks</span></span><br></pre></td></tr></table></figure></div><p>这样即可在配置文件中一键快速切换鼠标点击特效。</p><p>如果从本地加载JS脚本速度较慢，可以考虑将脚本放到CDN上再引入。</p><h1 id="打字特效"><a href="#打字特效" class="headerlink" title="打字特效"></a>打字特效</h1><div class="note info"><p>本章节参考 <a href="https://qianling.pw/hexo-optimization/" target="_blank" rel="noopener external nofollow noreferrer">千灵夙赋 | Hexo 优化汇总 #31</a>，原文出自 <a href="https://www.ilxtx.com/comment-input-effects.html" target="_blank" rel="noopener external nofollow noreferrer">龙笑天下 | 给 WordPress 博客网站添加评论输入打字礼花及震动特效</a></p></div><p><img src="http://yearito-1256884783.image.myqcloud.com/hexo-theme-beautify/typing-effect.gif" alt="打字特效" title="打字特效"></p><p>点击下方按钮下载相应的脚本，并置于 themes\\next\\source\\js\ 目录下：</p><p><a class="btn" href="https://script-1256884783.file.myqcloud.com/activate-power-mode.min.js" target="_blank" rel="noopener external nofollow noreferrer"><i class="fa fa-download fa-fw"></i>打字特效</a></p><p>在主题自定义布局文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="HTML"><figure class="iseeu highlight /html"><figcaption><span>themes\next\layout\_custom\custom.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;# 打字特效 #&#125;</span><br><span class="line">&#123;% if theme.typing_effect %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/activate-power-mode.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="handlebars"><span class="xml">    POWERMODE.colorful = </span><span class="template-variable">&#123;&#123; theme.typing_effect.colorful &#125;&#125;</span><span class="xml">;</span></span></span><br><span class="line"><span class="handlebars"><span class="xml">    POWERMODE.shake = </span><span class="template-variable">&#123;&#123; theme.typing_effect.shake &#125;&#125;</span><span class="xml">;</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.body.addEventListener(<span class="string">'input'</span>, POWERMODE);</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure></div><p>如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="DIFF"><figure class="iseeu highlight /diff"><figcaption><span>themes\next\layout\_layout.swig</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">      ...</span><br><span class="line">      &#123;% include '_third-party/exturl.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/bookmark.swig' %&#125;</span><br><span class="line">      &#123;% include '_third-party/copy-code.swig' %&#125;</span><br><span class="line"></span><br><span class="line"><span class="addition">+     &#123;% include '_custom/custom.swig' %&#125;</span></span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">  &lt;/html&gt;</span><br></pre></td></tr></table></figure></div><p>在主题配置文件中添加以下代码：</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><figcaption><span>themes\next\_config.yml</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># typing effect</span></span><br><span class="line"><span class="attr">typing_effect:</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span>  <span class="comment"># 礼花特效</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">false</span>  <span class="comment"># 震动特效</span></span><br></pre></td></tr></table></figure></div><p>如果从本地加载JS脚本速度较慢，可以考虑将脚本放到CDN上再引入。</p><h1 id="结束语"><a href="#结束语" class="headerlink" title="结束语"></a>结束语</h1><p>本文记录了本站在Next的基础上的进阶美化方案，除了一些简单的样式修改外，还添加了一些由插件支持的高级动效，包括动态背景、看板娘、边缘摆动、鼠标点击和打字特效等。笔者认为，动效可以使得站点变有趣，但同时也会增加网页的资源消耗，以及影响用户的关注点，有时候会喧宾夺主适得其反，建议珍爱PC资源，合理使用动效。</p></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span>Hexo搭建个人博客系列：主题美化篇</p><p><span>文章作者:</span>TJYS</p><p><span>发布时间:</span>2020年03月19日 - 00:00:00</p><p><span>最后更新:</span>2020年04月04日 - 16:33:14</p><p><span>原始链接:</span><a href="/blog/hexo-theme-beautify.html" title="Hexo搭建个人博客系列：主题美化篇">http://sky_mirrors_the_clouds.gitee.io/blog/hexo-theme-beautify.html</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://sky_mirrors_the_clouds.gitee.io/blog/hexo-theme-beautify.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license external nofollow noreferrer" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div><div><div class="read-over">-------------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------------</div></div></div><div><div class="share_reward"><div>坚持原创技术分享，感谢您的支持和鼓励！</div><button id="rewardButton" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span>打赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/images/wechatpay.png" alt="TJYS 微信支付"><p>微信支付</p></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/images/alipay.jpg" alt="TJYS 支付宝"><p>支付宝</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/blog/tags/Hexo/" rel="tag"><i class="fa fa-tag"></i> Hexo</a></div><div class="post-widgets"><div class="wp_rating"><div style="color:rgba(0,0,0,.75);font-size:13px;letter-spacing:4px;margin-bottom:5px">(&gt;看完记得五星好评哦亲&lt;)</div><div id="wpac-rating"></div></div></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/blog/hello-world.html" rel="next" title="Hello World"><i class="fa fa-chevron-left"></i> Hello World</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/blog/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E8%AF%BE%E7%A8%8B.html" rel="prev" title="机器学习课程">机器学习课程 <i class="fa fa-chevron-right"></i></a></div></div></footer></div></article><div class="post-spread"><div data-weibo-title="分享到微博" data-qq-title="分享到QQ" data-douban-title="分享到豆瓣" class="social-share" class="share-component" data-disabled="qzone,google+,linkedin" data-description="Share.js - 一键分享到微博，QQ空间，腾讯微博，人人，豆瓣...">分享到：</div></div></div></div><div class="comments" id="comments"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">站点概览</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><a href="/"><img class="site-author-image" itemprop="image" src="/blog/images/avatar.jpg" alt="TJYS"></a><p class="site-author-name" itemprop="name">TJYS</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/blog/archives/%7C%7Carchive"><a href="/blog/archives"><span class="site-state-item-count">6</span> <span class="site-state-item-name">文章</span></a></a></div><div class="site-state-item site-state-categories"><a href="/blog/categories/index.html"><span class="site-state-item-count">9</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/blog/tags/index.html"><span class="site-state-item-count">4</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/blog/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS </a><a title="收藏到书签，偶尔High一下^_^" rel="alternate external nofollow noreferrer" class="mw-harlem_shake_slow wobble shake" href="javascript:void(0)" onclick="(    /*     * Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>     *     * Licensed under the Apache License, Version 2.0 (the 'License');     * you may not use this file except in compliance with the License.     * You may obtain a copy of the License at     *     *      http://www.apache.org/licenses/LICENSE-2.0     *     * Unless required by applicable law or agreed to in writing, software     * distributed under the License is distributed on an 'AS IS' BASIS,     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     * See the License for the specific language governing permissions and     * limitations under the License.     */    function go() {        function c() {        var e = document.createElement('link');        e.setAttribute('type', 'text/css');        e.setAttribute('rel', 'stylesheet');        e.setAttribute('href', f);        e.setAttribute('class', l);        document.body.appendChild(e)    }     function h() {        var e = document.getElementsByClassName(l);        for (var t = 0; t < e.length; t++) {            document.body.removeChild(e[t])        }    }     function p() {        var e = document.createElement('div');        e.setAttribute('class', a);        document.body.appendChild(e);        setTimeout(function() {            document.body.removeChild(e)        }, 100)    }     function d(e) {        return {            height : e.offsetHeight,            width : e.offsetWidth        }    }     function v(i) {        var s = d(i);        return s.height > e &amp;&amp; s.height < n &amp;&amp; s.width > t &amp;&amp; s.width < r    }     function m(e) {        var t = e;        var n = 0;        while (!!t) {            n += t.offsetTop;            t = t.offsetParent        }        return n    }     function g() {        var e = document.documentElement;        if (!!window.innerWidth) {            return window.innerHeight        } else if (e &amp;&amp; !isNaN(e.clientHeight)) {            return e.clientHeight        }        return 0    }     function y() {        if (window.pageYOffset) {            return window.pageYOffset        }        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)    }     function E(e) {        var t = m(e);        return t >= w &amp;&amp; t <= b + w    }     var songs = [                'http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3', 'http://www.ytmp3.cn/down/57563.mp3'  ];    function S() {        var e = document.getElementById('audio_element_id');        if(e != null){            var index = parseInt(e.getAttribute('curSongIndex'));            if(index > songs.length - 2) {                index = 0;            } else {                index++;            }            e.setAttribute('curSongIndex', index);            N();        }        e.src = i;        e.play()    }     function x(e) {        e.className += ' ' + s + ' ' + o    }     function T(e) {        e.className += ' ' + s + ' ' + u[Math.floor(Math.random() * u.length)]    }     function N() {        var e = document.getElementsByClassName(s);        var t = new RegExp('\\b' + s + '\\b');        for (var n = 0; n < e.length; ) {            e[n].className = e[n].className.replace(t, '')        }    }    function initAudioEle() {        var e = document.getElementById('audio_element_id');        if(e === null){            e = document.createElement('audio');            e.setAttribute('class', l);            e.setAttribute('curSongIndex', 0);            e.id = 'audio_element_id';            e.loop = false;            e.bgcolor = 0;            e.addEventListener('canplay', function() {            setTimeout(function() {                x(k)            }, 500);            setTimeout(function() {                N();                p();                for (var e = 0; e < O.length; e++) {                    T(O[e])                }            }, 15500)        }, true);        e.addEventListener('ended', function() {            N();            h();            go();        }, true);        e.innerHTML = ' <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>';        document.body.appendChild(e);        }    }        initAudioEle();    var e = 30;    var t = 30;    var n = 350;    var r = 350;    var curSongIndex = parseInt(document.getElementById('audio_element_id').getAttribute('curSongIndex'));    var i = songs[curSongIndex];        var s = 'mw-harlem_shake_me';    var o = 'im_first';    var u = ['im_drunk', 'im_baked', 'im_trippin', 'im_blown'];    var a = 'mw-strobe_light';    var f = 'https://rocko.xyz/css/harlem-shake-style.css';        var l = 'mw_added_css';    var b = g();    var w = y();    var C = document.getElementsByTagName('*');    var k = null;    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            if (E(A)) {                k = A;                break            }        }    }    if (A === null) {        console.warn('Could not find a node of the right size. Please try a different page.');        return    }    c();    S();    var O = [];    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            O.push(A)        }    }    })()"><i class="fa fa-music"></i> High~</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a rel="external nofollow" href="https://github.com/Qikaile" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i>GitHub</a> </span><span class="links-of-author-item"><a rel="external nofollow" href="mailto：qikaile15205626407@gmail.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a> </span><span class="links-of-author-item"><a rel="external nofollow" href="https://user.qzone.qq.com/2649019047" target="_blank" title="QQ"><i class="fa fa-fw fa-qq"></i>QQ</a> </span><span class="links-of-author-item"><a rel="external nofollow" href="https://www.facebook.com/profile.php?id=100035074688152" target="_blank" title="facebook"><i class="fa fa-fw fa-facebook"></i>facebook</a></span></div><div id="music163player"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="280" height="86" src="//music.163.com/outchain/player?type=2&id=28802028&auto=0&height=66"></iframe></div><div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" class="cc-opacity" target="_blank"><img src="/blog/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div><marquee><a href="/links"><font size="4" face="STXingkai"><font color="#D1002E">点</font> <font color="#BA0045">我</font> <font color="#FF0000">欢</font> <font color="#E80017">迎</font> <font color="#A3005C">互</font> <font color="#A00073">换</font> <font color="#A0008A">友</font> <font color="#A000A1">链</font> <font color="#A000B8">哦</font> <font color="#A000CF">~</font> <font color="#A000E6">~</font></font></a></marquee><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-history fa-" aria-hidden="true"></i> 近期文章</div><ul class="links-of-blogroll-list"><li class="my-links-of-blogroll-li"><a href="/blog/PS%E5%8A%9F%E8%83%BD%E7%B2%BE%E9%80%9A%E8%AF%BE.html" title="PS功能精通课" target="_blank">PS功能精通课</a></li><li class="my-links-of-blogroll-li"><a href="/blog/pandas%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C.html" title="Pandas中文手册" target="_blank">Pandas中文手册</a></li><li class="my-links-of-blogroll-li"><a href="/blog/%E5%8D%81%E5%88%86%E9%92%9F%E6%90%9E%E5%AE%9Apandas.html" title="十分钟搞定 pandas" target="_blank">十分钟搞定 pandas</a></li><li class="my-links-of-blogroll-li"><a href="/blog/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E8%AF%BE%E7%A8%8B.html" title="机器学习课程" target="_blank">机器学习课程</a></li><li class="my-links-of-blogroll-li"><a href="/blog/hexo-theme-beautify.html" title="Hexo搭建个人博客系列：主题美化篇" target="_blank">Hexo搭建个人博客系列：主题美化篇</a></li></ul></div><div><canvas id="canvas" style="width:60%"></canvas></div><script>!function(){function t(t){var r=[];a.fillStyle="#005eac";var h=new Date,u=70,s=30,v=h.getHours(),g=Math.floor(v/10),m=v%10;r.push({num:g}),r.push({num:m}),r.push({num:10});var c=h.getMinutes(),g=Math.floor(c/10),m=c%10;r.push({num:g}),r.push({num:m}),r.push({num:10});var M=h.getSeconds(),g=Math.floor(M/10),m=M%10;r.push({num:g}),r.push({num:m});for(var p=0;p<r.length;p++)r[p].offsetX=u,u=f(u,s,r[p].num,t),p<r.length-1&&10!=r[p].num&&10!=r[p+1].num&&(u+=l);if(0==i.length)i=r;else for(var C=0;C<i.length;C++)i[C].num!=r[C].num&&(n(r[C]),i[C].num=r[C].num);return e(t),o(),h}function n(t){for(var n=t.num,e=m[n],o=0;o<e.length;o++)for(var f=0;f<e[o].length;f++)if(1==e[o][f]){var a={offsetX:t.offsetX+u+2*u*f,offsetY:30+u+2*u*o,color:g[Math.floor(Math.random()*g.length)],g:1.5+Math.random(),vx:4*Math.pow(-1,Math.ceil(10*Math.random()))+Math.random(),vy:-5};v.push(a)}}function e(t){for(var n=0;n<v.length;n++)t.beginPath(),t.fillStyle=v[n].color,t.arc(v[n].offsetX,v[n].offsetY,u,0,2*Math.PI),t.fill()}function o(){for(var t=0,n=0;n<v.length;n++){var e=v[n];e.offsetX+=e.vx,e.offsetY+=e.vy,e.vy+=e.g,e.offsetY>h-u&&(e.offsetY=h-u,e.vy=-e.vy*s),e.offsetX>u&&e.offsetX<r-u&&(v[t]=v[n],t++)}for(;t<v.length;t++)v.pop()}function f(t,n,e,o){for(var f=m[e],a=0;a<f.length;a++)for(var r=0;r<f[a].length;r++)1==f[a][r]&&(o.beginPath(),o.arc(t+u+2*u*r,n+u+2*u*a,u,0,2*Math.PI),o.fill());return o.beginPath(),t+=f[0].length*u*2}var a,r=820,h=250,u=7,l=10,s=.65,v=[];const g=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var i=[],m=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]],c=document.getElementById("canvas");c.width=r,c.height=h,a=c.getContext("2d");new Date;setInterval(function(){a.clearRect(0,0,a.canvas.width,a.canvas.height),t(a)},50)}()</script><div id="days"></div><script language="javascript">function show_date_time(){window.setTimeout("show_date_time()",1e3),BirthDay=new Date("03/14/2020 00:00:00"),today=new Date,timeold=today.getTime()-BirthDay.getTime(),sectimeold=timeold/1e3,secondsold=Math.floor(sectimeold),msPerDay=864e5,e_daysold=timeold/msPerDay,daysold=Math.floor(e_daysold),e_hrsold=24*(e_daysold-daysold),hrsold=setzero(Math.floor(e_hrsold)),e_minsold=60*(e_hrsold-hrsold),minsold=setzero(Math.floor(60*(e_hrsold-hrsold))),seconds=setzero(Math.floor(60*(e_minsold-minsold))),document.getElementById("days").innerHTML="已运行"+daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒"}function setzero(e){return 10>e&&(e="0"+e),e}show_date_time()</script></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#修改博客字体"><span class="nav-number">1.</span> <span class="nav-text">修改博客字体</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文章页末美化"><span class="nav-number">2.</span> <span class="nav-text">文章页末美化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#为标签添加图标"><span class="nav-number">2.1.</span> <span class="nav-text">为标签添加图标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#添加结束标记"><span class="nav-number">2.2.</span> <span class="nav-text">添加结束标记</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#页面加载进度条"><span class="nav-number">3.</span> <span class="nav-text">页面加载进度条</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#侧边栏放左边"><span class="nav-number">4.</span> <span class="nav-text">侧边栏放左边</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#添加动态背景"><span class="nav-number">5.</span> <span class="nav-text">添加动态背景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#粒子漂浮聚合"><span class="nav-number">5.1.</span> <span class="nav-text">粒子漂浮聚合</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Three-三维动效"><span class="nav-number">5.2.</span> <span class="nav-text">Three 三维动效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#随机三角丝带"><span class="nav-number">5.3.</span> <span class="nav-text">随机三角丝带</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#添加看板娘"><span class="nav-number">6.</span> <span class="nav-text">添加看板娘</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#边缘摆动效果"><span class="nav-number">7.</span> <span class="nav-text">边缘摆动效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#个性化回到顶部"><span class="nav-number">8.</span> <span class="nav-text">个性化回到顶部</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#鼠标点击特效"><span class="nav-number">9.</span> <span class="nav-text">鼠标点击特效</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#打字特效"><span class="nav-number">10.</span> <span class="nav-text">打字特效</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#结束语"><span class="nav-number">11.</span> <span class="nav-text">结束语</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div class="copyright">Copyright&copy; <span itemprop="copyrightYear">2020</span> <span class="with-love" id="animate"><i class="fa fa-heartbeat"></i> </span><span class="author" itemprop="copyrightHolder">TJYS.&ensp;</span> <span title="博客总字数"><i class="fa fa-edit"></i>&ensp;<span class="post-count">47.3k</span>字</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span title="symbols_count_time.count_total">124k</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-coffee"></i> </span><span title="symbols_count_time.time_total">1:53</span></div><span id="sitetime"></span><script language="javascript">function siteTime(){window.setTimeout("siteTime()",1e3);var e=1e3,t=60*e,o=60*t,i=24*o,a=365*i,n=new Date,r=n.getFullYear(),l=n.getMonth()+1,s=n.getDate(),M=n.getHours(),g=n.getMinutes(),m=n.getSeconds(),T=Date.UTC(2020,3,14,0,0,0),f=Date.UTC(r,l,s,M,g,m),h=f-T,u=Math.floor(h/a),d=Math.floor(h/i-365*u),D=Math.floor((h-(365*u+d)*i)/o),c=Math.floor((h-(365*u+d)*i-D*o)/t),w=Math.floor((h-(365*u+d)*i-D*o-c*t)/e);document.getElementById("sitetime").innerHTML=" 我已在此等候你 "+d+" 天 "+D+" 小时 "+c+" 分钟 "+w+" 秒"}siteTime()</script><div class="BbeiAn-info"><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34030402000254" style="text-decoration:none;padding-left:30px;background:url(https://gitee.com/sky_mirrors_the_clouds/cloudimg/raw/master/https://gitee.com/sky_mirrors_the_clouds/cloudimg/公安.png) no-repeat left center" rel="nofollow">皖公网安备 34030402000254号 </a>| 皖ICP备 - <a target="_blank" href="http://www.beian.miit.gov.cn/" rel="nofollow">20020535号</a></div><div class="weixin-box"><div class="weixin-menu"><div class="weixin-hover"><div class="weixin-description">微信扫一扫，在线沟通</div></div></div></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.ui.min.js"></script><script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.4"></script><script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/Valine.min.js"></script><style>.v .vwrap{padding:0 0 44px}.v .veditor{min-height:10rem;background-image:url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/comment-bg.png);background-size:contain;background-repeat:no-repeat;background-position:right;background-color:rgba(255,255,255,0);resize:none}.v .vwrap .vedit{padding-top:20px}.v .vwrap .vheader{width:80%;bottom:0;position:absolute;background:#fff7f7f7}.v .vinput{padding:10px 15px;text-align:center}.v .vwrap .vheader .vinput{border-bottom:0}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px}.v .vwrap .vcontrol{position:absolute;right:0;bottom:0;width:20%;padding-top:0}.v .vwrap .vcontrol .col.col-20,.v .vwrap .vedit .vctrl span.vpreview-btn{display:none}.v .vwrap .vcontrol .col.col-80{width:100%}.v .vbtn.vsubmit{border-radius:0;padding:0;color:#fff;line-height:44px;width:100%;border:none;background:#f99}.v .vlist .vcard .vhead .vsys{background:#fff7f7f7}@media screen and (max-width:520px){.v .vwrap .vheader .vinput{width:33.33%;padding:10px 5px}}</style><script type="text/javascript">new Valine({
        lang: 'zh-cn',
        admin_email: '2649019047@qq.com', //博主邮箱
        el: '#comments' ,
        notify: true, //邮件提醒！
        appId: 'QJxW5v8BlvRP9LYqYmrNRekF-MdYXbMMI',
        appKey: 'YtfMVlMfTdU4Y4zTo9k0Pj3h',
        avatar: 'monsterid',//小怪物头像,
  });

  //   自定义邮箱审核规则
    document.body.addEventListener('click', function(e) {
        if (e.target.classList.contains('vsubmit')) {
            const email = document.querySelector('input[type=email]');
            const nick = document.querySelector('input[name=nick]');
            const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!email.value || !nick.value || !reg.test(email.value)) {
                const str = `<div class="valert text-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;
                const vmark = document.querySelector('.vmark');
                vmark.innerHTML = str;
                vmark.style.display = 'block';
                setTimeout(function() {
                    vmark.style.display = 'none';
                    vmark.innerHTML = '';
                }, 2500);
            }
        }
    });

 // 点击回复直接评论,官方版本点击回复时都是跳回到页面上方的评论框进行回复，评论框是固定不动的
    // 参考https://immmmm.com/valine-diy,用到jQuery
    $(document).ready(function(){
        //$('.vemoji-btn').text('😀');
        $("#vcomments").on('click', 'span.vat',function(){
            $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap"));
            $('textarea#veditor').focus();
        })
    })</script><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script><script type="text/javascript">jinrishici.load(function(t){var i=t.data.content+"\n「"+t.data.origin.title+"」"+t.data.origin.dynasty+" · "+t.data.origin.author;document.getElementById("veditor").setAttribute("placeholder",i)})</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/blog/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var $=[];0!=g.length;){var C=g[g.length-1],m=C.position,x=C.word,w=m-20,y=m+80;0>w&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),$.push(r(p,w,y,g))}$.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&($=$.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",$.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script><script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script><script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script><script>!function(){function getCount(t,e,n){return t.get().then(function(a){var i;return a.exists?(i=a.data().count,n&&(window.localStorage&&window.localStorage.getItem(title)||(t.set({count:i+1,url:e}),i++))):n?(t.set({count:1,url:e}),i=1):i=0,window.localStorage&&n&&localStorage.setItem(title,!0),i})}function appendCountTo(t){return function(e){$(t).append($("<span>").addClass("post-visitors-count").append($("<span>").addClass("post-meta-divider").text("|")).append($("<span>").addClass("post-meta-item-icon").append($("<i>").addClass("fa fa-eye"))).append($("<span>").text("浏览 "+e+" 次")))}}firebase.initializeApp({apiKey:"AIzaSyDht9QEIa3UkAq8kKf2cgxOwBxFJ8-0vtc",projectId:"tjsy20200408"});var db=firebase.firestore(),articles=db.collection("articles"),isPost="Hexo搭建个人博客系列：主题美化篇".length>0,isArchive=!1,isCategory="".length>0,isTag="".length>0,urlPath="hexo-theme-beautify.html",urlFullPath="http://sky_mirrors_the_clouds.gitee.io/blog/hexo-theme-beautify.html",indexPath="index.html",isMenu=!1,menuLink="/blog/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/about/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/tags/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/categories/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/archives/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/shuoshuo/";(urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0);var menuLink="/blog/sitemap.xml";if((urlPath.indexOf(menuLink)>0||urlPath==indexPath)&&(isMenu=!0),isMenu){if(urlPath==indexPath){var titles=[],postsstr="";eval(postsstr);var promises=titles.map(function(t){return articles.doc(t)}).map(function(t){return getCount(t)});Promise.all(promises).then(function(t){var e=$(".post-wordcount");t.forEach(function(t,n){appendCountTo(e[n])(t)})})}}else{var title="Hexo搭建个人博客系列：主题美化篇",doc=articles.doc(title);getCount(doc,urlFullPath,!0).then(appendCountTo($(".post-wordcount")))}}()</script><script>!function(){var t=document.createElement("script"),s=window.location.protocol.split(":")[0];"https"===s?t.src="https://zz.bdstatic.com/linksubmit/push.js":t.src="http://push.zhanzhang.baidu.com/push.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}()</script><script type="text/javascript">wpac_init=window.wpac_init||[],wpac_init.push({widget:"Rating",id:23975,el:"wpac-rating",color:"ff9800"}),function(){if(!("WIDGETPACK_LOADED"in window)){WIDGETPACK_LOADED=!0;var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//embed.widgetpack.com/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t.nextSibling)}}()</script><script type="text/x-mathjax-config">MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });</script><script type="text/x-mathjax-config">MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });</script><script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script><script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@latest/bookmark.min.js"></script><script type="text/javascript">bookmark.scrollToMark("manual","#more")</script><script src="https://script-1256884783.file.myqcloud.com/cursor/love.min.js"></script><script src="https://script-1256884783.file.myqcloud.com/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.1/js/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.1/js/clipboard-use.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.3/css/sharejs.css"><script src="https://cdn.jsdelivr.net/gh/qikaile/cdn@1.3/js/social-share.min.js"></script></body></html><!-- rebuild by neat -->